<template>
    <div class="operate-log">
        <div class="Ptitle">{{ titleFont }}</div>
        <!-- 查询客户基本信息 -->
        <account-info :trtdData="trtdData" :tableTitle="'关联关系新增'"></account-info>
        <!-- 查询客户基本信息完 -->
        <div class="Ptitle" style="margin-top: 50px;">
            <ui-button class="primary-btn" @click="addArrfun()">添加新关系</ui-button>
        </div>
        <div v-for="(item, index) in addArr" :key="index" style="width: 80%;margin: 0 auto;">
            <div class="btnBody">
                <div class="xzlabelBody">
                    <div class="xzlabel">
                        <label>客户号</label>
                        <ui-input type="text" placeholder="请输入客户号" v-model="item.khnumber"> </ui-input>
                    </div>
                    <div class="xzlabel">
                        <label>客户名称</label>
                        <ui-input type="text" placeholder="请输入客户号" v-model="item.khnumber"> </ui-input>
                    </div>
                    <div class="xzlabel">
                        <label>客户类型</label>
                        <ui-input type="text" placeholder="请输入客户号" v-model="item.khnumber"> </ui-input>
                    </div>
                    <div class="xzlabel">
                        <label>关联关系</label>
                        <ui-input type="text" placeholder="请输入客户号" v-model="item.khnumber"> </ui-input>
                    </div>
                </div>
                <div style="margin-top: 25px;">
                    <ui-button class="primary-btn" @click="delAdd(index)">删除</ui-button>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script>
import vxTable from '@/components/vx-table';
import accountInfo from './components/accountInfo.vue'
export default {
    name: 'AccountRelation_infoAdd',
    data() {
        return {
            queryForm: {
                operTime: [],
                types: '',
                searchName: ''
            }, // 查询表单
            operatorType: [], // 操作类型列表
            tableData: [{ updatedBy: 222 }], // 列表数据
            isLoading: false, // 查询列表loading
            layout: 'prev, pager, next, total',
            trtdData: [
                {
                    label: '客户号',
                    labelData: '11111',
                    label2: '客户名称',
                    label2Data: '22222'
                },
                {
                    label: '客户类型',
                    labelData: '11111',
                    label2: '管户机构',
                    label2Data: '22222'
                },
                {
                    label: '金融资产',
                    labelData: '11111',
                    label2: '客户等级',
                    label2Data: '22222'
                },
            ],
            titleFont: '新增关系',
            addArr: [
                {
                    khnumber: '',
                    khname: '',
                    khtype: '',
                    khgx: ''
                }
            ],
            item: {
                khnumber: '',
                khname: '',
                khtype: '',
                khgx: ''
            }
        };
    },
    components: {
        accountInfo
    },
    created() {

    },
    methods: {
        // 添加新的联系表
        addArrfun() {
            let arr = this.addArr;
            let dd = this.item;
            arr.push(dd)
            this.addArr = arr;
        },
        // 删除某一个表
        delAdd(index) {
            //筛选出下标不相同的项，组成新数组
            var arr = this.addArr.filter((item, ind) => {
                return ind != index
            })
            this.addArr=arr;
        },
        /**
         * 获取详情
         * @param {object} value 当前列表数据
         */
        subDetail(value) {
        },
        /**
         * 查询操作日志
         * @param {boolean} val 是否重置当前页签
         */
        searchList(val) {

        },
        /**
         * 重置
         */
        reset() {
            this.queryForm = { operTime: [] };
            this.currentPage = 1;
            this.searchList();
        },
        // 维护跳转
        updatae(val) {
            console.log(val)
            // this.
        },
    },
};
</script>
    
<style lang="scss" scoped>
.operate-log {
    .Ptitle {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 40px;
    }

    .btnBody {
        width: 100%;
        height: 130px;
        padding-top: 30px;
        border: 1px solid #ddd;
        display: flex;
        margin-top: 50px;
    }

    .xzlabelBody {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
    }

    .xzlabel {
        width: 40%;
        display: flex;
    }

    .xzlabel label {
        width: 150px;
        text-align: right;
        line-height: 30px;
        margin-right: 20px;
    }
}
</style>
    